import styles from './longName.module.scss'
import {getTextWidth } from '@/utils/utils';
import router from '@/router';

/**
 * 参与群明细-群聊信息
 * @param row 当前列
 */
export const renderGroupName = ({ row, column, index }: any) =>{
    if(getTextWidth(row.is_delete == 1 ? row.name+'（此群已解散）' : row.name, '14px sans-serif') > 300){
        const defaultContent = () => (
            <div style="width: 300px;">
                {row.is_delete == 1 ? row.name+'（此群已解散）' : row.name}
            </div>
        );
        return(<div class={styles.name_info}>
                <el-image class={styles.avatar} src={row.avatar} fit="cover"></el-image>
                <el-tooltip
                    placement="top"
                    effect="dark"
                    show-after="800"
                    v-slots={{content: defaultContent}}
                    popper-class={styles.tooltip_info}>
                    <div class={styles.name_long}>
                    {row.is_delete == 1 ?<span>{row.name+'（此群已解散）'}</span>:
                    <span class={styles.pointer_group_name} onClick={()=>toGroupdetail(row)}>{row.name}</span>}
                    </div>
                </el-tooltip>
        </div>)
    }else{
        return(
            <div class={styles.name_info}>
                <el-image class={styles.avatar} src={row.avatar} fit="cover"></el-image>
                <div class={styles.name}>
                    {row.is_delete == 1 ?<span>{row.name ? row.name+'（此群已解散）' : '--'}</span>:
                    <span class={styles.pointer_group_name} onClick={()=>toGroupdetail(row)}>{row.name ? row.name : '--'}</span>}
                </div>
            </div>
        )
    }
}
/**
 * 奖励发放记录-用户信息
 * @param row 当前列
 */
export const renderUserName = ({ row, column, index }: any) => {
    if(getTextWidth(row.nickname, '14px sans-serif') > 300){
        const defaultContent = () => (
            <div style="width: 300px;">
                {row.nickname}
            </div>
        );
        return (
            <div class={styles.name_info}>
                <el-image src={row.avatar} fit="cover" class={styles.user_avatar}></el-image>
                <el-tooltip
                    placement="top"
                    effect="dark"
                    show-after="800"
                    v-slots={{content: defaultContent}}>
                    <div class={styles.name_long}>
                        <span class={row.cust_id?styles.pointer_group_name:''} onClick={()=>toUserdetail(row)}>{row.nickname}</span>
                    </div>
                </el-tooltip>
            </div>
        );
    }else{
        return (
            <div class={styles.name_info}>
                <el-image src={row.avatar} fit="cover" class={styles.user_avatar}></el-image>
                <div class={styles.name}>
                    <span class={row.cust_id?styles.pointer_group_name:''} onClick={()=>toUserdetail(row)}>{row.nickname || '--'}</span>
                </div>
            </div>
        ); 
    }
}
/**
 * 打卡用户&打卡记录-用户信息
 * @param row 当前列
 */
export const reNderUserDetail = ({ row, column, index }: any) => {
    if(getTextWidth(row.nickname || row.name, '14px sans-serif') > 150){
        const defaultContent = () => (
            <span style="width: 300px;display:inline-block">
                {row.nickname || row.name}
            </span>
        );
        return (
            <div class={styles.name_info}>
                <el-image src={row.avatar} fit="cover" class={styles.user_avatar}></el-image>
                <el-tooltip
                    placement="top"
                    effect="dark"
                    show-after="800"
                    v-slots={{content: defaultContent}}>
                    <div class={styles.group_long_detail}>{row.cust_id && row.name ?<span class={styles.pointer_group_name} onClick={()=>toUserdetail(row)}>{row.name}</span> : <span>{row.nickname|| row.name}</span>}</div>
                </el-tooltip>
            </div>
        );
    }else{
        return (
            <div class={styles.name_info}>
                <el-image src={row.avatar} fit="cover" class={styles.user_avatar}></el-image>
                <div class={styles.name}>{row.cust_id && row.name ?<span class={styles.pointer_group_name} onClick={()=>toUserdetail(row)}>{row.name || '--'}</span> : <span>{row.nickname || row.name || '--'}</span>}</div>
            </div>
        ); 
    }
}
/**
 * 打卡用户&打卡记录-群聊信息
 * @param row 当前列
 */
export const renderGroupDetail = ({ row, column, index }: any) =>{
    if(getTextWidth(row.is_group_delete == 1 ? row.groupchat_name+'（此群已解散）': row.groupchat_name, '14px sans-serif') > 250){
        const defaultContent = () => (
            <div style="width: 200px">
                {row.is_group_delete == 1 ? row.groupchat_name+'（此群已解散）': row.groupchat_name}
            </div>
        );
        return(<div class={styles.name_info}>
                <el-image class={styles.avatar} src={row.groupchat_avatar} fit="cover"></el-image>
                <el-tooltip
                    placement="top"
                    effect="dark"
                    show-after="800"
                    v-slots={{content: defaultContent}}>
                    <div class={styles.group_long_name}>
                    {row.is_group_delete == 1 ?<span>{ row.groupchat_name+'（此群已解散）'}</span>:
                    <span class={row.activity_id?styles.pointer_group_name:''} onClick={()=>toGroupdetail(row)}>{row.groupchat_name}</span>}
                    </div>
                </el-tooltip>
        </div>)
    }else{
        return(
            <div class={styles.name_info}>
                <el-image class={styles.avatar} src={row.groupchat_avatar} fit="cover"></el-image>
                <div class={styles.name}>
                    {row.is_group_delete == 1 ?<span>{row.groupchat_name ? row.groupchat_name+'（此群已解散）' : '--'}</span>:
                    <span class={row.activity_id?styles.pointer_group_name:''} onClick={()=>toGroupdetail(row)}>{row.groupchat_name ? row.groupchat_name : '--'}</span>}
                </div>
            </div>
        )
    }
}
// 去除tooltip的显示
const removeTip = () => {
    const myNodeList = document.querySelectorAll('.el-popper')
    for (let tip in myNodeList) {
        let tipItem = myNodeList[tip]
        if (typeof tipItem == 'object') {
          tipItem.style.display = 'none'
        }
    }
}
 
// 跳转客户群详情
const toGroupdetail = (val: any) => {
    if(val.group_id){
        setTimeout(()=> {
            removeTip()
        },800)
        router.push({
            path: '/customer/groupManage/list/detail',
            query: { id: val.group_id }
        });
    }
}

// 跳转客户详情
const toUserdetail = (val: any) => {
    if(val.cust_id){
        setTimeout(()=> {
            removeTip()
        },800)
        router.push(`/customer/manage/list/detail?id=${val.cust_id}&type=1`);
    }
}